<template>
	<div class="panel panel-default">
		<div class="panel-body">
			<div class="ww-aside-navbar" id="nslide"></div>
			<div id="flycontainer">
			  <div id="butterfly">
			    <div class="left wing"></div>
			    <div class="right wing"></div>
			  </div>
			</div>
			<div class="sliceBox">
				<ul id="sb-slider" class="sb-slider">
					<li v-for="item in sliderList">
						<img v-bind:src="item.src" alt="item.alt"/>
						<div class="sb-description">
							<h3>{{item.description}}</h3>
						</div>
					</li>
				</ul>
				<div id="nav-arrows" class="nav-arrows">
					<a href="#">Next</a>
					<a href="#">Previous</a>
				</div>
				<div id="nav-dots" class="nav-dots">
					<span v-for="n in sliderList.length" :class="n == 1 ? 'nav-dot-current' : '' "></span>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script>
	import '../assets/css/hello.css'
	import '../plug/flip.js'
	import '../plug/jquery.slicebox.js'
	var sliderList = [
		{
			"src":require("../assets/img/1.jpg"),
			"alt":"image1",
			"description":"Creative Lifesaver"
		},
		{
			"src":require("../assets/img/2.jpg"),
			"alt":"image2",
			"description":"Honest Entertainer"
		},
		{
			"src":require("../assets/img/3.jpg"),
			"alt":"image3",
			"description":"Brave Astronaut"
		},
		{
			"src":require("../assets/img/4.jpg"),
			"alt":"image4",
			"description":"Affectionate Decision Maker"
		},
		{	
			"src":require("../assets/img/5.jpg"),
			"alt":"image5",
			"description":"Groundbreaking Artist"
		},
		{
			"src":require("../assets/img/6.jpg"),
			"alt":"image6",
			"description":"Faithful Investor"
		},
		{
			"src":require("../assets/img/7.jpg"),
			"alt":"image7",
			"description":"Selfless Philantropist"
		}
	]
	export default {
		name: 'hello',
		data() {
			return {
				sliderList: sliderList
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				
				var sources = [];
				for (var i = 1; i < 8; i++){
					var url = require("../assets/img/"+i+".jpg");
					sources.push(url);
				}
				var nSlide = new NSlide("#nslide",{
					width:window.innerWidth -285,
					height:(window.innerWidth -285) * 0.6,
					sources:sources
				});
				setInterval(function(){
					nSlide.flip();
				}, 4500);
				
				var sliceBoxPage = (function(){
					var navArrows = $("#nav-arrows"),
						navDots = $("#nav-dots"),
						nav = navDots.children("span"),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady : function() {
							},
							orientation : 'r',/*h*/
							cuboidsRandom : true,/*cuboidsCount : 3,*/
							/*autoplay : true*/
							onBeforeChange:function(pos){
								nav.removeClass("nav-dot-current");
								nav.eq(pos).addClass("nav-dot-current");
							}
						}),
						initSlice = function(){
							initEvents();
						},
						initEvents = function(){
							/*add navigation events*/
							navArrows.children(":first").on("click",function(){
								slicebox.next();
								return false;
							});
							
							navArrows.children(":last").on("click",function(){
								slicebox.previous();
								return false;
							});
							
							nav.each(function(index){
								$(this).on("click",function(){
									var dot = $(this);
									if(!slicebox.isActive()){
										nav.removeClass("nav-dot-current");
										dot.addClass("nav-dot-current");
									}
									slicebox.jump(index + 1);
									return false;
								});
							});
						};
					return {initSlice:initSlice};
				})();
				sliceBoxPage.initSlice();
			}
		
		}
	}
</script>